<template>
	<view :class="config.style">
		<view class="sale-bar">
			<view class="item back" @click="back()">
				<view class="icon">
					<uni-icons type="arrowthinleft" size="14" color="#999"></uni-icons> 
				</view>
				<text class="text">返回</text>
			</view>
			<view class="item favorites" @click="favorites()">
				<view class="icon">
					<uni-icons type="star-filled" size="14" :color="favorites_yesno==1?'#f90':'#999'"></uni-icons> 
				</view>
				<text class="text">收藏</text>
			</view>
			<view class="item share" @click="share()">
				<view class="icon">
					<uni-icons type="redo-filled" size="14" color="#999"></uni-icons> 
				</view>
				<text class="text">分享</text>
			</view>
			<view class="sale-btn">
				<!--下单支付-->
				<button type="default" size="mini" class="sale-button" hover-class="button-hover" @click="openSaleChoose()">
					<text>立即购买</text>
				</button>
			</view>
		</view>
		
		<!-- 下单弹出框 -->
		<uni-popup id="saleChoose" ref="saleChoose" type="bottom">
			<view class="saleChoose">
				
				<view class="goods-info">
					<view class="cover">
						<image class="image" :src="data.cover_100" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="price">
							<text class="yuan">￥</text>
							<!-- <text class="value">{{data.price}}</text> -->
							<view class="rate"> 
								<text class="pointback">{{handlePrice(chooseSkuParams.price,0)}}</text>.{{handlePrice(chooseSkuParams.price,1)}} 
								<text class="member-price" v-if="data.can_be_used_card">({{data.can_be_used_card.member_card_info.title}}:{{data.can_be_used_card.member_card_info.discount_str}})</text>
							</view>
						</view>
						
						<view class="title text-ellipsis-2">
							{{data.title}}
						</view>
						<view class="description text-ellipsis">
							{{data.description}}
						</view>
						
					</view>
				</view>
				<!--SKU容器-->
				<view class="goods-sku sku-content" v-if="Object.keys(sku).length > 0">
					<view class="item" v-for="(item,key,i) in skuTable" :key="i">
						<view class="title">{{item.title}}</view>
						<view class="list">
							<view class="chile-item" :class="skuTable[key].value[c_k].active?'active':''"  v-for="(c_item,c_k,c_i) in item.value" :key="c_i" @click="chooseSku(key,c_k)">
								<text>{{c_item.title}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="goods-count">
					<view class="title">数量</view>
					<view class="info">
						<view class="number-box">
							<view class="a_minus cut-btn" @click="setNum('cut')">-</view>
							<view class="number-input">
								{{num}}
							</view>
							<view class="a_add add-btn" @click="setNum('add')">+</view>
						</view>
					</view>
				</view>
				
				<view class="goods-quantity">
					<view class="title">库存</view>
					<view class="info">
						<text class="quantity">剩余：</text>
						<text>{{chooseSkuParams.quantity}}</text>
					</view>
				</view>
				
				<view class="diglog-sale">
					<!--下单支付-->
					<button type="default" class="sale-button" hover-class="button-hover" @click="queryBuy()">
						<text>立即购买</text>
					</button>
				</view>
			</view>
		</uni-popup>
		
		<!--登录框-->
		<Login ref="login" :config="config" @getUserInfo="getUserInfo"/>
		<!--分享海报-->
		<qrcode-poster ref="poster" 
				:title="data.title" 
		        :subTitle="data.description" 
		        :headerImg="data.cover_400" 
				:abImg="config.cover_200" 
		        :price="data.price"></qrcode-poster>
	</view>
</template>

<script>
	import QrcodePoster from '../../../components/muu-qrcode-poster/muu-qrcode-poster.vue'

	export default {
		name: 'SaleBar',
		components: {
			QrcodePoster
		},
		props: {
			config: {
				type: Object,
				default: {}
			},
			type: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				userInfo: {},
				favorites_yesno: 0, //是否已收藏
				qrcode: '', // 小程序二维码
				/********以下商品相关数据********/
				sku: this.data.sku_format || {}, // 商品的SKU数据
				skuTable: [],
				skuInfo: [],
				chooseSkuIndex: '', //用户选择的SKU索引
				chooseSkuParams: {
					'price' : this.data.price,
					'marking_price' : this.data.marking_price,
					'quantity' : this.data.quantity
				} , // SKU价格，划线价格，库存参数
				quantity: this.data.quantity, //商品库存数量
				num: 1, // 购买数量
			}
		},
		created() {
			this.favorites_yesno = this.data.favorites_yesno
			//获取已登录用户数据
			this.getUserInfo()
			this.initSku()
		},
		
		methods: {

			/**
			 * 返回
			 */
			back: function(){
				let pages = getCurrentPages() // 获取栈实例
				let prevPage = pages[pages.length - 2]
				if(prevPage !== undefined){
					uni.navigateBack()
				}else{
					let url = '../index/index'
					uni.redirectTo({
						url: url
					});
				}
			},
			
			/**
			 * 收藏
			 */
			favorites: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {};
				
				let params = this.urlParams
				let data = {}
					data.action = 'edit'
					data.info_id = this.data.id
					data.info_type = 'goods'
					
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/favorites'
					//#endif
					//#ifdef H5
					url = 'entry/site/favorites'
					//#endif
				this.util.request({
					url : url,
					data : data,
					method: 'POST',
					
					success: function (res) {
						if (res.data.code == 200) {
							//console.log(res)
							uni.showToast({
								title: res.data.msg,
								duration: 2000
							});
							that.setFavorites()
						}
						if(res.data.msg == '需要登录'){
							//触发登录框
							that.$refs.login.loginDialog()
						}
					}
				})
				
			},
			setFavorites: function(){
				if(this.favorites_yesno == 0){
					this.favorites_yesno = 1
				}else{
					this.favorites_yesno = 0
				}
			},
			/**
			 * 分享海报
			 */
			share: function(){
				let that = this
				//#ifdef MP-WEIXIN
				//获取二维码base64码
				that.is_show_model = false
				let qrcode_url = this.util.url('entry/wxapp/qrcode',{
					'type': that.type,
					'type_id': Number(that.data.id),
					'm': 'muu_minishop'
				})
				that.$refs.poster.showCanvas(qrcode_url)
				//#endif
				
				//#ifdef H5
				let url = '../share/index?type=goods&type_id=' + this.data.id
				//console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
				//#endif
			},
			
			/**
			 * 打开下单选择确认弹出框
			 */
			openSaleChoose: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {};
				console.log(userInfo,'userInfo')

				if (userInfo.memberInfo) {
					this.$refs.saleChoose.open()
					//展开后选择sku第一项
					this.skuTable.forEach(function(item,index){
						item.value.forEach(function(v_item,v_index){
							if(v_index == 0){
								that.chooseSku(index,v_index)
							}
						})
					})
				}else{
					//触发登录框
					that.$refs.login.loginDialog()
				}
			},
			
			
			/**
			 * 关闭购买选择框
			 */
			closeSaleChoose: function(){
				this.$refs.saleChoose.close()
			},
			
			/**
			 * 重构sku.table数据结构
			 */
			initSku: function(){
				let that = this
				if(Object.keys(this.sku).length == 0){
					//空对象不做处理
				}else{
					let sku_table = []
					Object.keys(this.sku.table).forEach(function(idx, obj) {
						let temp = {}
							temp.title = idx
							temp.value = []
							that.sku.table[idx].forEach(function(item,index,arr){
								let temp_value = {}
									temp_value.title = item
									temp_value.active = false
								temp.value.push(temp_value)
							})
						sku_table.push(temp)
					});
					this.skuTable = sku_table
				}
				console.log(this.skuTable, 'skuTable')
			},
			
			/**
			 * 商品SKU选择
			 */
			chooseSku: function(key,c_key){
				//console.log(key + '|' + c_key)
				let that = this
				let sku_table = this.sku.table
				//console.log(JSON.stringify(this.sku))
				//设置选择sku的对象
				this.skuTable[key].value.forEach(function(item,index){
					//console.log(item.active)
					item.active = false
				})
				this.skuTable[key].value[c_key].active = true
				//console.log(JSON.stringify(this.skuTable))
				
				//拼接库存的键
				let q_index = '';
				this.skuTable.forEach(function(item,index){
					//console.log(item)
					item.value.forEach(function(v_item,v_index){
						if(v_item.active == true){
							q_index += ';' + item.title + ':' + v_item.title
						}
					})
				})
				if(q_index.substr(0,1)==';')q_index=q_index.substr(1)
				console.log(q_index, 'sku索引')
				this.chooseSkuIndex = q_index
				//读取库存数量
				var q = 0;
				Object.keys(this.sku.info).forEach(function(idx) {
					if(idx == q_index){
						q = parseInt(that.sku.info[q_index].quantity);
					}else{
						if(idx.includes(q_index)){
							q += parseInt(that.sku.info[idx].quantity);
						}
					}
				})
				console.log(q,'库存')
				this.quantity = parseInt(q - this.num)
				//读取SKU价格，划线价格，库存
				this.chooseSkuParams = this.sku.info[q_index]
				console.log(this.chooseSkuParams)
			},
			
			/**
			 * 增加或减少购买数量
			 */
			setNum: function(key){
				//减少
				if(key == 'cut'){
					if(this.num > 1){
						this.num = this.num - 1
					}else{
						this.num = 1
					}
				}
				
				//增加
				if(key == 'add'){
					if(this.num >= this.quantity){
						this.num = this.quantity
					}else{
						this.num = this.num + 1
					}
				}
			},
			
			/**
			 * 跳转至下单购买页面
			 */
			queryBuy: function(){
				if(this.quantity == 0){
					uni.showToast({
					    title: '库存不足！',
						icon: 'none',
						position: 'bottom',
					    duration: 3000
					});
					return false
				}
				let urlParams = 'id='+this.data.id+'&quantity='+this.num+'&sku='+this.chooseSkuIndex
				let url = 'buy?' + urlParams
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
		
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				this.userInfo = userInfo
				if (userInfo) {
					// 执行父级(更新数据)
					this.$emit('getData')
				}
			},
			
			/**
			 * 优化价格显示
			 * @param {Object} price
			 * @param {Object} index
			 */
			handlePrice(price,index){
				return (price || "").split('.')[index];
			}
		},
		
		
	}
</script>

<style lang="scss">
	
	.sale-bar {
		display: flex;
		position: fixed;
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
		text-align: center;
		border-top: 2rpx solid #f4f6f7;
		z-index: 98;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		box-sizing: content-box;
		.item {
			padding: 0;
			flex: 1;
			.icon {
				display: block;
				height: 56rpx;
				overflow: hidden;
				line-height: 56rpx;
			}
			.text {
				display: block;
				font-size: 24rpx;
				color: #999;
				height: 40rpx;
				line-height: 40rpx;
				overflow: hidden;
			}
		}
		.sale-btn {
			width: 360rpx;
			padding: 0;
			padding: 14rpx 10rpx 14rpx 0;
			
			.sale-button {
				display: block;
				font-size: 30rpx;
				padding: 0;
				line-height: 69rpx;
				border-radius: 30rpx;
				color: #fff;
				&::after {
					border: 0;
				}
			}
			.button-hover {
				
			}
			.disabled {
				opacity: .6;
			}
		}
	}
	
	/*下单选择确认框*/
	.saleChoose {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		.goods-info {
			display: flex;
			flex-wrap: wrap;
			.cover {
				position: relative;
				width: 193rpx;
				height: 193rpx;
				overflow: hidden;
				border-radius: 14rpx;
				z-index: 2;
				margin: 19rpx 45rpx 38rpx 14rpx;
				.image {
					border-radius: 10rpx;
					width: 193rpx;
					height: 193rpx;
					display: block;
				}
			}
			.info {
				flex: 1;
				padding: 10rpx;
				.title {
					font-size: 24rpx;
					color: #2d2e2f;
					font-weight: 600;
					height: 72rpx;
					line-height: 36rpx;
				}
				.description {
					color: #999;
					font-size: 24rpx;
				}
				.price {
					margin-top: 10rpx;
					font-size: 36rpx;
					.yuan {
						font-size: 28rpx;
					}
					.rate{
						display: inline-block;
						.pointback{
							font-size: 60rpx;
							font-family: 'DIN-Medium, DIN';
							font-weight: 600;
						}
					}
					.value {

					}
					.member-price {
						padding-left: 20rpx;
						font-size: 28rpx;
						color: #999;
						font-weight: 400;
					}
				}
			}
		}
		
		.goods-sku {
			margin: 20rpx 0;
			display: block;
			.item {
				.title {
					font-size: 24rpx;
					color: #2d2e2f;
					font-weight: 600;
				}
				.list {
					.chile-item {
						display: inline-block;
						height: 65rpx;
						border: 2rpx solid #ddd;
						margin: 5rpx;
						padding: 0 14rpx;
						font-size: 26rpx;
						color: #666;
						border-radius: 10rpx;
						line-height: 65rpx;
						background-color: #f5f5f7;
						&:first-child {
							margin-left: 0;
						}
					}
					.chile-item.active {
						
					}
				}
			}
		}
		
		.goods-count {
			margin: 10rpx 0;
			display: flex;
			height: 28rpx;
			
			.title {
				flex: 1;
				font-size: 24rpx;
				color: #2d2e2f;
				line-height: 26rpx;
				font-family: 'PingFangSC-Medium, PingFang SC';
				font-weight: 600;
			}
			.info {
				width: 100px;
				
				.number-box {
					display: flex;
					width: 200rpx;
					.cut-btn {
						width: 58rpx;
						height: 58rpx;
						line-height: 58rpx;
						text-align: center;
						background-color: #f5f5f7;
						border-radius: 4rpx;
						border: 2rpx solid #ddd;
					}
					.add-btn {
						width: 58rpx;
						height: 58rpx;
						line-height: 58rpx;
						text-align: center;
						background-color: #f5f5f7;
						border-radius: 4rpx;
						border: 2rpx solid #ddd;
					}
					.number-input {
						flex: 1;
						height: 58rpx;
						line-height: 58rpx;
						border: 2rpx solid #ddd;
						border-radius: 4rpx;
						text-align: center;
						font-size: 26rpx;
						margin: 0 4rpx;
						background-color: #f5f5f7;
					}
				}
			}
		}
		
		.goods-quantity {
			margin: 40rpx 0 20rpx;
			display: flex;
			height: 46rpx;
			line-height: 46rpx;
			font-family: 'PingFangSC-Medium, PingFang SC';
			.title {
				font-size:24rpx;
				width: 50%;
				color: #2d2e2f;
				font-weight: 600;
			}
			.info {
				width: 50%;
				text-align: right;
				
				font-size: 24rpx;
				color: #2d2e2f;
				font-weight: 600;
			}
		}
		
		.diglog-sale {
			width: 100%;
			.sale-button {
				display: block;
				border-radius: 46rpx;
				color: #fff;
			}
			.button-hover {
				
			}
		}
	}
	
	/*页面风格设计*/
	.Blue {
		.sale-bar {
			.sale-btn {
				.sale-button {
					background-color: $Blue;
				}
				.button-hover {
					background-color: $Blue-hover;
				}
			}
		}
		.saleChoose {
			.price {
				color: $Blue;
			}
			.goods-sku {
				.chile-item.active {
					color: $Blue;
					border: 2rpx solid $Blue;
				}
			}
			.sale-button {
				background-color: $Blue;
			}
			.button-hover {
				background-color: $Blue-hover;
			}
		}
	}
	.Green {
		.sale-bar {
			.sale-btn {
				.sale-button {
					background-color: $Green;
				}
				.button-hover {
					background-color: $Green-hover;
				}
			}
		}
		.saleChoose {
			.price {
				color: $Green;
			}
			.goods-sku {
				.chile-item.active {
					color: $Green;
					border: 2rpx solid $Green;
				}
			}
			.sale-button {
				background-color: $Green;
			}
			.button-hover {
				background-color: $Green-hover;
			}
		}
	}
	.LightRed {
		.sale-bar {
			.sale-btn {
				.sale-button {
					background-color: $LightRed;
				}
				.button-hover {
					background-color: $LightRed-hover;
				}
			}
		}
		
		.saleChoose {
			.price {
				color: $LightRed;
			}
			.goods-sku {
				.chile-item.active {
					color:  $LightRed;
					border: 2rpx solid $LightRed;
				}
			}
			.sale-button {
				background-color: $LightRed;
			}
			.button-hover {
				background-color: $LightRed-hover;
			}
		}
	}
	.Orange {
		.sale-bar {
			.sale-btn {
				.sale-button {
					background-color: $Orange;
				}
				.button-hover {
					background-color: $Orange-hover;
				}
			}
		}
		.saleChoose {
			.price {
				color: $Orange;
			}
			.goods-sku {
				.chile-item.active {
					color: $Orange;
					border: 2rpx solid $Orange;
				}
			}
			.sale-button {
				background-color: $Orange;
			}
			.button-hover {
				background-color: $Orange-hover;
			}
		}
	}
	.LightPink {
		.sale-bar {
			.sale-btn {
				.sale-button {
					background-color: $LightPink;
				}
				.button-hover {
					background-color: $LightPink-hover;
				}
			}
		}
		.saleChoose {
			.price {
				color: $LightPink;
			}
			.goods-sku {
				.chile-item.active {
					color: $LightPink;
					border: 2rpx solid $LightPink;
				}
			}
			.sale-button {
				background-color: $LightPink;
			}
			.button-hover {
				background-color: $LightPink-hover;
			}
		}
	}
	.Magenta {
		.sale-bar {
			.sale-btn {
				.sale-button {
					background-color: $Magenta;
				}
				.button-hover {
					background-color: $Magenta-hover;
				}
			}
		}
		.saleChoose {
			.price {
				color: $Magenta;
			}
			.goods-sku {
				.chile-item.active {
					color: $Magenta;
					border: 2rpx solid $Magenta;
				}
			}
			.sale-button {
				background-color: $Magenta;
			}
			.button-hover {
				background-color: $Magenta-hover;
			}
		}
	}
	
	
	

</style>
